<template>
	<view class="review-box page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="transparent" height="74">
				<view class="u-nav-slot flex-align-center" slot="left">
					<view class="back-box flex-center">
						<image class="image1" src="@/static/images/review/fanhui.png" @click="allParse" />
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="score">
			<view class="score-label">
				得分：
			</view>
			<view class="score-num">
				<span>{{ totalScore }}</span>
				<span class="score-num-unit">分</span>
			</view>
		</view>
		<view class="total-box">
			<view class="total-box-son flex-center">
				<view style="margin-bottom: 24rpx;">
					总题数：{{ answerInfo.length }}题
				</view>
				<view class="flex-align-center">
					<view class="opposite-question">
						<span>答对题数</span>
						<span>{{ bingoNum }}题</span>
					</view>
					<view class="line"></view>
					<view class="mistakes">
						<span>答错题数</span>
						<span>{{ answerInfo.length - bingoNum }}题</span>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="flex-between">
				<view class="parse-box">
					<view class="parse-lable flex-center">
						解析
					</view>
					<span class="parse-desc">点击题目，查看答题详情。</span>
				</view>
				<view class="all-parse flex-center" @click="allParse">
					全部解析
				</view>
			</view>
			<view class="detail-box">
				<view class="flex-align-center item-sheet" v-for="items in all_answerInfo" :key="items.id">
					<view class="title-type">{{ items.name }}</view>
					<view class="line"></view>
					<view class="sheet-list flex-align-center">
						<view class="item flex-center" @click="chooseItem(i, idx)"
							:class="i.detailInfo && i.asInfo.choose_as === i.detailInfo.correct_option ? 'greenColor' : 'redColor'"
							v-for="(i, idx) in items.item" :key="i.id">
							{{
								idx + 1
							}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapGetters
} from 'vuex';
import {
	paperExamHandleApi
} from '@/api/questionBank/index.js'
export default {
	components: {

	},
	computed: {
		...mapGetters([
			'answerInfo',
			'all_answerInfo'
		])
	},
	data() {
		return {
			timeData: {},
			indicatorDots: false,
			autoplay: false,
			interval: 2000,
			duration: 500,
			totalScore: 0,
			bingoNum: 0, //答对题数
			examRecordInfo: null,
		};
	},
	created() {

	},
	// 
	onLoad(option) {

		console.log(option, 'option');
		if (option.examRecordInfo) {
			this.examRecordInfo = JSON.parse(option.examRecordInfo);
			this.calculateScore();
			// console.log(this.examRecordInfo, 'this.examRecordInfo ');

		}
	},
	methods: {
		async paperExamHandle() {
			const minutes = this.calculateTime(this.examRecordInfo.use_time)
			const params = {
				id: this.examRecordInfo.paper_exam_record_id,
				paper_id: this.examRecordInfo.paper_id,
				paper_exam_id: this.examRecordInfo.paper_exam_id,
				score: this.totalScore,
				error_num: this.answerInfo.length - this.bingoNum,
				use_time: minutes,
			}
			const {
				data: res
			} = await paperExamHandleApi(params);
			console.log(res);

		},
		// 计算剩余时长
		calculateTime(use_time) {
			const total_seconds = (use_time.days * 86400) + (use_time.hours * 3600) + (use_time.minutes * 60) +
				use_time.seconds + (use_time.milliseconds / 1000)
			// 1 小时的时间转换为秒
			const oneHourInSeconds = 60 * 60; // 3600 秒
			// 计算剩余时间（秒）
			const remainingSeconds = oneHourInSeconds - total_seconds;
			// 转换为分钟和秒
			const minutes = Math.floor(remainingSeconds / 60);
			const seconds = (remainingSeconds % 60).toFixed(3);
			console.log(`剩余时间：${minutes} 分钟 ${seconds} 秒`);
			return minutes
		},
		// 计算分数
		calculateScore() {
			const answerInfo = this.answerInfo;
			console.log(answerInfo, '计算分数');
			let totalScore = 0;
			let bingoNum = 0;
			answerInfo.forEach(item => {
				console.log(item, 'item');
				if (item.detailInfo) {
					if (item.asInfo.choose_as === item.detailInfo.correct_option) {
						totalScore += item.score;
						bingoNum += 1
					}
				}
			});
			console.log(totalScore, '总得分 ');
			this.totalScore = totalScore;
			this.bingoNum = bingoNum;
			// console.log(this.all_answerInfo, 'all_answerInfo');
			this.paperExamHandle();
		},
		onload() {

		},
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		},
		onChange(e) {
			this.timeData = e
		},
		handIn() {
			uni.navigateTo({
				url: '/pages/questionBank/components/handIn/handIn'
			})
		},
		// 选择单个题
		chooseItem(item, idx) {
			console.log(item, '选择单个题', idx);
			// this.$emit('chooseItem', {
			// index: idx,
			// id: item.id
			// })
			// uni.$emit('chooseAnswerParse', {
			// 	index: idx,
			// 	id: item.id
			// })
			this.allParse(idx);
		},
		// 全部解析
		allParse(index = 0) {
			uni.setStorageSync('seeParse', true);
			uni.setStorageSync('totalScore', this.totalScore);
			uni.setStorageSync('answerIndex', index);
			this.goBack();
		}

	}
}
</script>

<style lang="scss" scoped>
@function px_2_vw($px) {
	@return #{$px * 100 / 1920}vw;
}

.page-box {
	background-image: url('../../../../static/images/common/beijing-jiaojuan.png');
	background-size: 100% 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	position: relative;
}

::v-deep .u-navbar__content__left {
	margin: 0 33rpx !important;
}

::v-deep .u-navbar__content__right {
	margin: 0 33rpx !important;
}

.u-nav-slot {
	color: #fff;
	font-size: px_2_vw(39);

	.back-box {
		width: px_2_vw(96);
		height: px_2_vw(96);
		border-radius: 50%;
		background-color: #FBA704;
	}

	.image1 {
		width: px_2_vw(52);
		height: px_2_vw(63);
	}
}

.score {
	position: absolute;
	z-index: 10;
	left: 258rpx;
	top: 10rpx;
	width: px_2_vw(315);
	height: px_2_vw(296);
	background-image: url('../../../../static/images/common/star.png');
	background-size: 100% 100%;
	border: 1rpx dashed #757575;

	.score-label {
		position: absolute;
		top: 93rpx;
		left: 79rpx;
		color: #010101;
		font-size: px_2_vw(24);
	}

	.score-num {
		position: absolute;
		top: 130rpx;
		left: 131rpx;
		color: #A30303;
		font-size: px_2_vw(70);
		font-weight: 600;

		.score-num-unit {
			font-size: px_2_vw(28);
			font-weight: 400;
		}
	}
}

.total-box {
	width: px_2_vw(501);
	height: px_2_vw(226);
	background: #FFF992;
	border-radius: 18rpx;
	padding: 20rpx;
	position: absolute;
	z-index: 10;
	left: 50%;
	transform: translate(-50%, -50%);
	top: 160rpx;

	.total-box-son {
		width: 100%;
		height: 100%;
		background: #F8F4B7;
		flex-direction: column;
		color: #C1990D;

		.opposite-question {
			color: #0F9F04;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.mistakes {
			color: #D11717;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.line {
			height: 52rpx;
			width: 1rpx;
			border-left: 1rpx solid #C1990D;
			margin: 0 53rpx;
		}

	}
}




.content {
	flex: 1;
	margin-bottom: 33rpx;
	background: #fff;
	margin: px_2_vw(180) 0rpx 0rpx 0rpx;
	position: relative;
	padding: 24rpx 50rpx;

	.parse-lable {
		width: px_2_vw(156);
		height: px_2_vw(75);
		color: #fff;
		background-image: url('../../../../static/images/common/jiexi.png');
		background-size: 100% 100%;
		font-size: px_2_vw(30);
	}

	.parse-box {
		display: flex;
		align-items: end;
	}

	.all-parse {
		width: px_2_vw(142);
		height: px_2_vw(55);
		background: #fff;
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		border: 2rpx solid #26823E;
		color: #26823E;
		font-size: px_2_vw(24);
	}

	.parse-desc {
		color: #757575;
		font-size: px_2_vw(22);
		margin-left: 27rpx;
	}

	.detail-box {
		overflow-y: auto;
		height: calc(100vh - 500rpx);
		margin-top: 46rpx;

		.item-sheet {
			border-bottom: 1rpx dashed #a0a6af;
			padding: 20rpx 0;
			font-size: px_2_vw(24);

		}

		.line {
			height: px_2_vw(60);
			width: 1rpx;
			border-left: 1rpx solid #a0a6af;
			margin: 0 20rpx;
		}

		.title-type {
			width: px_2_vw(160);
		}

		.sheet-list {

			.item {
				width: px_2_vw(60);
				height: px_2_vw(60);
				border-radius: 50%;
				border: 1rpx solid #a0a6af;
				color: #a0a6af;
				margin-right: 30rpx;
			}
		}

		.title {
			width: px_2_vw(115+48);
			color: #000;
		}

		.line {
			height: 81rpx;
			width: 1rpx;
			border-left: 1rpx solid #A4A1A1;
			margin: 9rpx 38rpx 9rpx 0;
		}

		.detail-item {
			border-bottom: 1rpx dashed #757575;
		}

		.title-number-item {
			width: px_2_vw(60);
			height: px_2_vw(60);
			color: #fff;
			border-radius: 50%;
			margin-right: 39rpx;
		}

		.green {
			background: #2C7248;
		}

		.red {
			background: #FE2211;
		}
	}

}

.greenColor {
	background: #0F9F04;
	border-color: #0F9F04 !important;
	color: #fff !important;
}

.redColor {
	background: #D11717;
	border-color: #D11717 !important;
	color: #fff !important;
}
</style>